<template>
	<view class="container">
		<uv-navbar title="视频文案" bg-color="none" @leftClick="leftClick"></uv-navbar>
		<view class="coupon-box">
			<uv-form labelPosition="left" :model="form" :rules="rules" ref="form" labelWidth="0">
				<view class="form-box">
					<template v-for="item in formList">
						<view :class="{'form-name-box': item.type == 'number' || item.type == 'other'}">
							<view class="name">
								<text class="dy-iconfont" :class="item.icon"></text> {{item.title}}
							</view>
							<uv-form-item :prop="item.id">
								<view class="content" v-if="item.type == 'input'">
									<uv-input v-model="form[item.id]" :placeholder="item.placeholder"
										border="none"></uv-input>
								</view>
								<view class="content" v-else-if="item.type == 'select'" @click="showSexSelect(item.id)">
									<uv-input v-model="form[item.id]" disabled disabledColor="none"
										:placeholder="item.title" border="none"></uv-input>
								</view>
								<uv-textarea v-else-if="item.type == 'textarea'" v-model="form[item.id]"
									placeholder="请输入" border="none" :maxlength="item.length"></uv-textarea>
								<view class="number-box" v-if="item.type == 'number'">
									<uv-number-box v-model="form[item.id]" integer button-size="24" color="#000"
										bgColor="#fff" iconStyle="color: #000"></uv-number-box>
								</view>
								<view class="other-box" v-if="item.type == 'other'">
									积分余额：{{form[item.id]}}
								</view>
								<template v-slot:right v-if="item.type == 'select'">
									<view class="icon-right">
										<uv-icon name="arrow-down"></uv-icon>
									</view>
								</template>
							</uv-form-item>
						</view>
					</template>
				</view>
			</uv-form>
		</view>
		<uv-action-sheet ref="sexSelect" :actions="actions.columns" :title="actions.title"
			@select="sexSelect"></uv-action-sheet>
			
			<view class="button-fb-box">
				<view class="button-fb-s" @click="inSubmit">上一步</view>
				<view class="button-fb" @click="onSubmit">下一步</view>
			</view>
	</view>
</template>

<script>
import { number } from '../../uni_modules/uv-ui-tools/libs/function/test';

	const app = getApp();
	export default {
		data() {
			return {
				tab: {
					active: 0,
					list: [{
						title: '满减劵',
						value: 0
					}, {
						title: '无门槛劵',
						value: 1
					}]
				},
				actions: {
					id: '',
					title: '',
					columns: [],
				},
				formList: [{
					title: '视频主题*',
					icon: "",
					id: "Theme",
					type: 'textarea',
					length: 200

				}, {
					title: '视频风格',
					icon: "",
					id: "style",
					type: 'select'

				}, {
					title: '补充要求*',
					icon: "",
					id: "supplement",
					type: 'textarea',
					length: 500

				}, {
					title: '描述文案字数',
					icon: "",
					id: "describe",
					type: 'input',
					placeholder: '请输入30~300之间的数字'

				}, {
					title: '生成条数',
					icon: "",
					id: "branches",
					type: 'number'

				}, {
					title: '消耗积分',
					icon: "",
					id: "integral",
					type: 'other'

				}],
				form: {
					Theme: '',
					style: '',
					supplement: '',
					describe: '',
					branches: 1,
					integral: 0,
				},
				rules: {

					Theme: {
						type: 'string',
						required: true,
						message: '视频主题必填，长度限200个字符',
						trigger: ['blur', 'change']
					},
					style: {
						type: 'string',
						required: true,
						message: '选择视频风格',
						trigger: ['change']
					},
					supplement: {
						type: 'string',
						required: true,
						message: '补充要求必填，长度限500个字符',
						trigger: ['blur', 'change']
					},
					describe: {
						type: 'number',
						required: true,
						message: '请输入30~300之间的数字',
						trigger: ['change']
					},
				},
			};
		},
		methods: {
			leftClick() {
				app.navigateBack()
			},
			ckTab(index) {
				if (this.tab.active != index) {
					this.tab.active = index
					this.$refs.form.clearValidate()
				}
			},
			showSexSelect(id) {
				this.actions = {
						id,
						title: '请选择视频风格',
						columns: [{
							name: '不限',
						}, {
							name: '1',
						}, {
							name: '2',
						}, {
							name: '3',
						}, {
							name: '4',
						}, {
							name: '5',
						}]
					},
					setTimeout(() => {
						this.$refs.sexSelect.open();
						uni.hideKeyboard()
					}, 50)
			},
			sexSelect(e) {
				this.form[this.actions.id] = e.name;
			},
			onSubmit() {
				// this.$refs.form.validate().then(res => {
				// 	console.log(res);
				// 	uni.showToast({
				// 		icon: 'success',
				// 		title: '校验通过'
				// 	})
				// }).catch(errors => {
				// 	console.log(errors);
				// 	uni.showToast({
				// 		icon: 'error',
				// 		title: '校验失败'
				// 	})
				// })
				app.navigationTo('page_account/create/music')
				// console.log(this.form);
			},
			inSubmit(){
				// app.navigationTo('page_account/create/material')
				app.navigateBack()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		width: 100vw;
		padding: 40rpx;
		padding-top: 226rpx;
		padding-bottom: calc(96rpx + 32rpx + 40rpx);
		box-sizing: border-box;
		background: #F7F8FA;
		background: radial-gradient(128% 128% at 95% 0%, #D7CEFF 0%, #BBE1FF 62%, #FFFFFF 95%);


		.button-fb-box {
			position: fixed;
			bottom: 32rpx;
			left: 50%;
			transform: translateX(-50%);
			display: flex;

			.button-fb {
				width: 326rpx;
				height: 96rpx;
				background: linear-gradient(180deg, #886AE6 0%, #4635FF 99%);
				border-radius: 48rpx;
				font-weight: 400;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 96rpx;
				text-align: center;
			}
			.button-fb-s {
				width: 326rpx;
				height: 96rpx;
				border: 2rpx solid #4635FF;
				border-radius: 48rpx;
				font-weight: 400;
				font-size: 32rpx;
				color: #4635FF;
				line-height: 96rpx;
				text-align: center;
				margin-right: 20rpx;
			}
		}

		.tab {
			.tab-list {
				height: 120rpx;
				background: rgba(255, 255, 255, 0.3);
				border-radius: 32rpx 32rpx 32rpx 32rpx;
				border: 2rpx solid #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 20rpx;
				box-sizing: border-box;

				.tab-item {
					width: 306rpx;
					height: 80rpx;
					line-height: 80rpx;
					border-radius: 16rpx;
					font-weight: 500;
					font-size: 30rpx;
					color: #000000;
					text-align: center;

					&.active {
						background: linear-gradient(180deg, #886AE6 0%, #4635FF 99%);
						color: #FFFFFF;
					}
				}
			}
		}

		.form-box {
			background: rgba(255, 255, 255, 0.3);
			border-radius: 32rpx 32rpx 32rpx 32rpx;
			border: 2rpx solid #FFFFFF;
			padding: 44rpx 42rpx;
			box-sizing: border-box;
			margin-top: 20rpx;

			.name {
				.dy-iconfont {
					font-size: 40rpx;
					padding-right: 22rpx;
				}
			}

			.form-name-box {
				display: flex;
				align-items: center;
				justify-content: space-between;
			}


			.content {
				display: flex;
				justify-content: space-between;
				margin-top: 20rpx;
				width: 100%;
				height: 80rpx;
				background: rgba(255, 255, 255, 0.3);
				border-radius: 16rpx;
				padding: 18rpx 20rpx;
				box-sizing: border-box;
				font-weight: 400;
				font-size: 30rpx;
				color: #000000;

				.dy-iconfont {
					font-size: 46rpx
				}

				input {
					flex: 1;
				}
			}

			.number-box {
				display: inline-block;
			}

			.other-box {
				width: 240rpx;
				height: 60rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				font-weight: 400;
				font-size: 30rpx;
				color: #000000;
				line-height: 60rpx;
				text-align: center;
			}
		}
	}

	/deep/.uv-form-item__body__right__content {
		position: relative;

		.item__body__right__content__icon {
			position: absolute;
			right: 20rpx;
			top: 50%;
			transform: translateX(-50%);
		}
	}

	/deep/.uv-textarea {
		background: rgba(255, 255, 255, 0.3) !important;
		background-color: rgba(255, 255, 255, 0.3) !important;
	}
</style>